<template>
  <div class="container">
    <div class="search-container block">
      <GlobalSearch
        ref="search"
        :category="searchData.searchType"
        :condition-val="searchData.searchCondition"
        @searchClick="searchClick"
        @importClick="importClick"
      ></GlobalSearch>
    </div>
    <div class="expose-main">
      <splitpanes class="default-theme">
        <pane size="25" min-size="20" max-size="70">
          <div
            class="main-left"
            v-loading="leftLoading"
            element-loading-text="Loading"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
          >
            <Tree
              :paramsData="searchData"
              @checkClick="checkClick"
              @blur="blur"
            ></Tree>
            <!-- <TagTree
              ref="tagTree"
              :tree-data="treeData"
              @exposureHandle="exposureHandle"
            ></TagTree> -->

            <ExposeListLeftContent
              :category="searchData.searchType"
              :public-data="publicData"
              :condition-val="searchData.searchCondition"
              @exposureHandle="exposureHandle"
            ></ExposeListLeftContent>
          </div>
        </pane>
        <pane>
          <div
            class="main-right"
            v-loading="loading"
            element-loading-text="Loading"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
          >
            <ExposeListTabs
              :category="searchData.searchType"
              :tabs-data="tabsData"
              :tabsList="tabsList"
              @tabClick="tabClick"
            ></ExposeListTabs>

            <div class="listHead-wrap">
              <div class="head-left">
                <!-- <div
              class="head-left-check"
              :class="{ 'all-checked': isAllChecked }"
              @click="checkAll"
            >
              <div class="check-box"></div>
              <div class="check-title">全选</div>
            </div> -->
                <div class="head-left-operate">
                  <el-select
                    v-model="selectArr"
                    placeholder="请选择"
                    @change="planCommand"
                  >
                    <el-option
                      v-for="item in selectOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="head-left-operate">
                  <el-dropdown @command="batchCommand">
                    <span class="el-dropdown-link">
                      批量操作<el-icon>
                        <CaretBottom />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu slot="dropdown" :append-to-body="false">
                        <el-dropdown-item command="startTask"
                          >下发任务</el-dropdown-item
                        >
                        <el-dropdown-item command="download"
                          >下载导出</el-dropdown-item
                        >
                        <el-dropdown-item command="conditionAddTag"
                          >新增标签</el-dropdown-item
                        >
                        <el-dropdown-item command="conditionDelTag"
                          >删除标签</el-dropdown-item
                        >
                        <el-dropdown-item command="batchClearTag"
                          >清空标签</el-dropdown-item
                        >
                        <el-dropdown-item command="conditionAddCompany"
                          >新增所属公司</el-dropdown-item
                        >
                        <el-dropdown-item command="conditionDelCompany"
                          >删除所属公司</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>

                <ExposeListBaseSort
                  :order-condition="searchData.orderCondition"
                  :category="searchData.searchType"
                  @changeSort="changeSort"
                ></ExposeListBaseSort>
              </div>
              <div class="head-right">
                <div v-if="showText">
                  已选择 <span>{{ assetCount }}</span> 条数据，
                </div>
                <div>
                  共为您检测到 <span>{{ total }}</span> 条数据
                </div>
              </div>
            </div>

            <div class="bottom-right-content">
              <ExposeListItem
                :category="searchData.searchType"
                :public-list="publicList"
                :condition-val="searchData.searchCondition"
                @exposureHandle="exposureHandle"
                @successFn="successFn"
                @updateTags="getLeftList"
                @clickItem="clickItem"
                @checkboxChange="checkboxChange"
                @ratioClick="ratioClick"
              >
              </ExposeListItem>

              <ElementPagination
                v-if="pageShow"
                :total="total"
                :page-size="searchData.pageSize"
                :current-page="searchData.pageNumber"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
              ></ElementPagination>
            </div>
          </div>
        </pane>
      </splitpanes>
    </div>
    <!-- BatchAddTags 新增和删除的提示框 -->
    <BatchAddTags
      v-if="showBatchAddTags"
      v-model:is-show="showBatchAddTags"
      :batchTagsType="batchTagsType"
      :title="batchTagsTitle"
      :assetIds="assetIds"
      :searchData="searchData"
      :selectType="selectType"
      :assetCount="assetCount"
      @addTagsByIds="addTagsByIds"
      @clearTagsByIds="clearTagsByIds"
      @delTagsByIds="delTagsByIds"
      @update:is-show="showBatchAddTags = $event"
    >
    </BatchAddTags>

    <RadarConfirm
      v-model="falseAlarmConfirm"
      :title="confirmTitle"
      :content="confirmContent"
      :confirm-cb="confirmCb"
    >
    </RadarConfirm>
    <BatchAddCompany
      v-if="showBatchDelCompany"
      v-model:is-show="showBatchDelCompany"
      :batchCompanyType="batchCompanyType"
      :title="batchCompanyTitle"
      :assetIds="assetIds"
      :searchData="searchData"
      :selectType="selectType"
      :assetCount="assetCount"
      @update:is-show="showBatchDelCompany = $event"
    ></BatchAddCompany>
    <!-- 创建任务计划 -->
    <AddTaskPlan
      v-if="addTaskPlan"
      v-model:is-show="addTaskPlan"
      :assetIds="assetIds"
      :searchData="searchData"
      :selectType="selectType"
      @update:is-show="showBatchDelCompany = $event"
    ></AddTaskPlan>
    <!-- 下载导出 -->
    <Download
      v-if="downExport"
      v-model:is-show="downExport"
      :assetIds="assetIds"
      :searchData="searchData"
      :selectType="selectType"
      :assetCount="assetCount"
      @update:is-show="showBatchDelCompany = $event"
    ></Download>
    <!-- 资产导入 -->
    <AssetImport
      v-if="assetImport"
      @update:isShow="updateIsShow"
      v-model:is-show="assetImport"
      @update:is-show="showBatchDelCompany = $event"
    ></AssetImport>
  </div>
</template>
<script lang="ts" setup>
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import ExposeListLeftContent from '@/components/Expose/ExposeList/LeftContent.vue';
import ExposeListTabs from '@/components/Expose/ExposeList/Tabs.vue';
import ExposeListItem from '@/components/Expose/ExposeList/Item.vue';
import ExposeListBaseSort from '@/components/Expose/ExposeList/BaseSort.vue';
import GlobalSearch from '@/components/Expose/GlobalSearch.vue';
import AssetImport from '@/components/Expose/AssetImport.vue';
import BatchAddTags from '@/components/Expose/BatchAddTags.vue';
import RadarConfirm from '@/components/Expose/RadarConfirm.vue';
import BatchAddCompany from '@/components/Expose/BatchAddCompany.vue';
import AddTaskPlan from '@/components/Expose/AddTaskPlan.vue';
import Download from '@/components/Expose/Download.vue';
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const search = ref<any>(null);
const treeData = ref([]);
const pageShow = ref(false); // 控制分页显示
const searchData = reactive({
  holdingRatio: '', // 查询控股的企业
  searchType: 'sys',
  searchCondition: '',
  pageSize: 10,
  pageNumber: 1,
  orderCondition: [
    {
      name: 'exposure_risk', // 暴露风险
      order: 'desc',
      label: '暴露风险',
    },
    {
      name: 'update_time', // 更新时间
      order: 'desc',
      label: '更新时间',
    },
  ],
});
const total = ref(0);
const publicList = ref<any>([]); // list数据
const publicData = ref({}); // 左侧聚合数据
const tabsData = ref({}); // tabs数据
const tabsList = ref([]);
const showBatchAddTags = ref(false); // 是否展示批量新增标签弹窗
const falseAlarmConfirm = ref(false); // 批量误报弹窗
const confirmTitle = ref('确认'); // 确认弹窗标签
const confirmContent = ref('确认要执行此操作吗？'); // 确认弹窗内容文案
const confirmCb = ref<any>(null); // 确认弹窗回调
const loading = ref(false);
const leftLoading = ref(false);
const showBatchDelCompany = ref(false); // 是否展示批量删除公司弹窗
const batchTagsType = ref('conditionAddTag');
const batchTagsTitle = ref('');
const batchCompanyType = ref('conditionDelCompany'); // 操作公司类型
const batchCompanyTitle = ref('批量删除所属公司'); // 确认弹窗标签
const addTaskPlan = ref(false); // 创建任务计划
const selectType = ref(0); // 选择类型 0 无 1 当前页 2 根据条件
const assetIds = ref<any>([]); // 传给后端的资产的id
const selectIds = ref<any>([]); // 选择的资产id
const selectCancelIds = ref<any>([]); // 选择的资产取消的id
const cancelIds = ref<any>([]); // 取消的资产id
const downExport = ref(false); // 下载导出
const selectOption = ref([
  {
    value: '',
    label: '选择内容',
  },
  {
    value: 'selectCurrentPage',
    label: '选择当前页',
  },
  {
    value: 'conditionSelect',
    label: '按条件选择',
  },
]);
const selectArr = ref('');
const operateArr = ref('');
const assetCount = ref(0);
const assetImport = ref(false);
const itemList = ref([]);
const isAllChecked = computed(() => {
  const list = publicList.value || [];
  return list.length && list.every((el: any) => el.isChecked);
});
const showText = computed(() => {
  if (
    selectArr.value === 'selectCurrentPage' ||
    selectArr.value === 'conditionSelect' ||
    assetIds.value.length > 0
  ) {
    return true;
  }
  return false;
});
const checkButtonPermission = computed(() => {
  let btnCode = [];
  return btnCode;
});
onMounted(() => {
  pageShow.value = false;

  if (store.state.expose.searchData.searchType) {
    const { searchType, searchCondition, pageNumber } =
    store.state.expose.searchData;
    searchData.searchType = searchType;
    searchData.searchCondition = searchCondition;
    searchData.pageNumber = pageNumber;
  }
  getLeftList();
  getList();
  reloadTree();
});
const updateIsShow = (val) => {
  assetImport.value = val;
};
const reloadTree = async () => {
  const { code, data } = await store.dispatch('expose/labelCategoryList', {
    containsTag: true,
  });
  if (code === 0) {
    treeData.value = data.children;
  }
};

const blur = (val) => {
  console.log(1245);

  searchData.holdingRatio = val;
  getLeftList();
  getList();
};
const successFn = () => {
  setTimeout(tabClick, 3000);
  selectType.value === 0;
};
const searchClick = (val) => {
  searchData.searchCondition = val;
  tabClick();
};
const ratioClick = (val) => {
  searchData.holdingRatio = val;
  getLeftList();
  getList();
};
// 左侧树结构拼接条件
const checkClick = (res, boolean) => {
  connectStr(res, boolean, 'tree');
};
// 点击左侧标签事件
const exposureHandle = (res, boolean) => {
  connectStr(res, boolean, 'left');
};
// 拼接条件
const connectStr = (res, boolean, type) => {
  let mark = '&&';
  if (type === 'tree') {
    mark = '||';
  } else {
    mark = '&&';
  }
  // 已经存在
  if (boolean) {
    if (searchData.searchCondition.includes(`${mark}${res}`)) {
      searchData.searchCondition = searchData.searchCondition.replace(
        `${mark}${res}`,
        '',
      );
    } else {
      searchData.searchCondition = searchData.searchCondition.replace(
        `${res}`,
        '',
      );
    }
  } else if (searchData.searchCondition) {
    searchData.searchCondition += `${mark}${res}`;
  } else {
    searchData.searchCondition = res;
  }
  if (searchData.searchCondition.substring(0, 2) == mark) {
    searchData.searchCondition = searchData.searchCondition.substring(
      2,
      searchData.searchCondition.length,
    );
  }

  tabClick();
};
const tabClick = (activeName?: any) => {
  if (activeName) {
    searchData.searchType = activeName;
    // this.searchData.searchCondition = ''
  }
  searchData.pageNumber = 1;
  getLeftList();
  getList();
  resetSelect();
};
const resetSelect = () => {
  selectType.value = 0;
  assetCount.value = 0;
  assetIds.value = [];
  selectIds.value = [];
  selectCancelIds.value = [];
  cancelIds.value = [];
  selectArr.value = '';
};
const changeSort = (item, index) => {
  itemList.value = item;
  searchData.orderCondition[index].order =
    item.order === 'asc' ? 'desc' : 'asc';
  successFn();
};
// 全选操作
const checkAll = () => {
  const list = publicList.value || [];
  const checkStatus = list.some((el: any) => !el.isChecked);
  list.forEach((el: any) => (el.isChecked = checkStatus));
};
// 获取取消的资产ids
const getCancelIds = () => {
  const list = publicList.value || [];
  return list.filter((el: any) => !el.isChecked).map((el: any) => el.id);
};
// 获取选中的资产ids
const getCheckedIds = () => {
  const list = publicList.value || [];
  return list.filter((el: any) => el.isChecked).map((el: any) => el.id);
};
// 获取选中的资产列表
const getCheckedAssets = () => {
  const list = publicList.value || [];
  return list
    .filter((el: any) => el.isChecked)
    .map((el: any) => {
      let category = el.businessType;
      // 这里的暗网类型不统一，转一下
      // if (category === 'darknet') {
      //   category = 'darknetDataTenant'
      // }
      return {
        category,
        assetId: el.id,
      };
    });
};
// 下发任务
const startTask = () => {
  // this.addTaskPlan = true
  const params = {
    assetIds: assetIds.value,
    searchData: searchData,
    selectType: selectType.value,
  };
  router.push({
    path: '/Exposure/ExposeList/DistributeTask',
    query: {
      params: JSON.stringify(params),
    },
  });

  store.commit('expose/setSearchData', searchData);
};
// 下载导出
const download = () => {
  downExport.value = true;
};
const importClick = () => {
  assetImport.value = true;
};

// 批量操作指令
const batchCommand = (command) => {
  const commands = {
    startTask: startTask,
    download: download,
    conditionAddTag: conditionAddTag,
    conditionDelTag: conditionDelTag,
    batchClearTag: batchClearTag,
    conditionAddCompany: conditionAddCompany,
    conditionDelCompany: conditionDelCompany,
  };

  if (command && commands[command]) {
    if (selectType.value === 0) {
      assetIds.value = [...new Set(selectIds.value)];
    } else if (selectType.value === 1) {
      assetIds.value = [...new Set(selectIds.value)];
      // 注意：这里对 selectType.value === 1 和 === 0 的处理是完全相同的，可以考虑合并
    } else if (selectType.value === 2) {
      assetIds.value = [...new Set(cancelIds.value)];
    }

    if (selectType.value !== 2 && !assetIds.value.length) {
      return ElMessage.warning('请至少选中一条资产'); // 注意：这里假设 ElMessage.warning 是同步的或您不需要等待其完成
    }

    commands[command](); // 调用对应的处理函数
  }
};
// 批量清空标签
const batchClearTag = (assets, ids) => {
  batchTagsType.value = 'batchClearTag';
  batchTagsTitle.value = '清空标签';
  showBatchAddTags.value = true;
};
// 批量标记误报
const batchFalseAlarm = async (assets, ids) => {
  confirmTitle.value = '误报';
  confirmContent.value = '确认所选资产为误报吗？';
  falseAlarmConfirm.value = true;
  await new Promise((resolve) => {
    confirmCb.value = resolve;
  });
  const { code } = await store.dispatch('expose/batchMarkAsset', {
    assetList: assets,
    misinformation: 1,
  });
  if (code === 0) {
    successFn();
  }
};
// 按条件新增标签
const conditionAddTag = async (assets, ids) => {
  batchTagsType.value = 'conditionAddTag';
  batchTagsTitle.value = '新增标签';
  showBatchAddTags.value = true;
};
// 按条件删除标签
const conditionDelTag = async (assets, ids) => {
  batchTagsType.value = 'conditionDelTag';
  batchTagsTitle.value = '删除标签';
  showBatchAddTags.value = true;
};
const conditionTagFn = () => {
  searchData.searchCondition = search.value.getInputVal();
  if (!searchData.searchCondition) {
    ElMessage.warning('请输入查询条件');
    return false;
  }
  return true;
};
const conditionAddCompany = () => {
  batchCompanyType.value = 'conditionAddCompany';
  batchCompanyTitle.value = '新增所属公司';
  showBatchDelCompany.value = true;
};
const conditionDelCompany = () => {
  batchCompanyType.value = 'conditionDelCompany';
  batchCompanyTitle.value = '删除所属公司';
  showBatchDelCompany.value = true;
};
const addCompanys = () => {
  batchCompanyType.value = '';
  batchCompanyTitle.value = '';
  selectIds.value = [];
  cancelIds.value = [];
  assetIds.value = [];
  assetCount.value = 0;
  successFn();
};
const cancelAllFn = () => {
  publicList.value.forEach((el: any) => (el.isChecked = false));
};
const selectAllFn = () => {
  publicList.value.forEach((el: any) => (el.isChecked = true));
};
const planCommand = (command) => {
  if (command == 'selectCurrentPage') {
    selectAllFn();
    selectCurrentPage();
    getAssetCount();
  } else if (command == 'conditionSelect') {
    selectAllFn();
    conditionSelect();
    getAssetCount();
  } else {
    selectType.value = 0;
    selectIds.value = [];
    assetIds.value = selectIds.value;
    cancelAllFn();
    getAssetCount();
  }
};
// 选择当前页
const selectCurrentPage = () => {
  selectType.value = 1;
  selectIds.value = [];
  selectCancelIds.value = [];
  const ids: any = getCheckedIds();
  selectIds.value.push(...ids);
  assetIds.value = [...new Set(selectIds.value)];
};
// 按条件选择
const conditionSelect = () => {
  selectType.value = 2;
  cancelIds.value = [];
  assetIds.value = [...new Set(cancelIds.value)];
};
// 处理ES延迟问题, 前端变更批量新增的标签
const addTagsByIds = ({ tags, assetIds }) => {
  publicList.value = publicList.value.map((el) => {
    if (assetIds.includes(el.id)) {
      let tag = el.tag || [];
      tag = [...new Set([...tag, ...tags])];
      return {
        ...el,
        tag: tag,
      };
    }
    return el;
  });
};
// 处理ES延迟问题, 前端变更批量删除的标签
const clearTagsByIds = (assetIds) => {
  publicList.value = publicList.value.map((el) => {
    if (assetIds.includes(el.id)) {
      return {
        ...el,
        tag: [],
      };
    }
    return el;
  });
  // setTimeout(this.successFn, 2000)
};
const delTagsByIds = ({ tags, assetIds }) => {
  publicList.value.forEach((el, index) => {
    if (assetIds.includes(el.id)) {
      el.tag.splice(el.tag.indexOf(...tags), 1);
    }
  });
};
const handleSizeChange = (v) => {
  searchData.pageSize = v;
  getList();
};
const handleCurrentChange = async (v) => {
  searchData.pageNumber = v;
  await getList();

  if (selectType.value === 0) {
    if (selectIds.value.length) {
      publicList.value.forEach((el: any) => {
        if (selectIds.value.includes(el.id)) {
          el.isChecked = true;
        }
      });
    }
  }
  // 选择当前页
  if (selectType.value === 1) {
    selectAllFn();

    if (selectIds.value.length) {
      publicList.value.forEach((el: any) => {
        if (selectCancelIds.value.includes(el.id)) {
          el.isChecked = false;
        }
      });

      publicList.value.forEach((el: any) => {
        if (el.isChecked) {
          selectIds.value.push(el.id);
        }
      });

      assetIds.value = [...new Set(selectIds.value)];
      getAssetCount();
    }
  }
  // 按照条件选择
  if (selectType.value === 2) {
    selectAllFn();
    if (cancelIds.value.length) {
      publicList.value.forEach((el) => {
        if (cancelIds.value.includes(el.id)) {
          el.isChecked = false;
        }
      });
      getAssetCount();
    }
  }
};
// 获取左侧聚合条件数据
const getLeftList = async () => {
  leftLoading.value = true;
  publicData.value = {};
  const { code, data = {} } = await store.dispatch(
    'expose/getLeftList',
    searchData,
  );
  leftLoading.value = false;
  if (code !== 0) {
    return;
  }
  publicData.value = data;
};

// 获取列表数据
const getList = async () => {
  loading.value = true;
  publicList.value = [];
  const { code, data = {} } = await store.dispatch(
    'expose/getList',
    searchData,
  );
  loading.value = false;
  if (code !== 0) {
    return;
  }
  const { dataPage = {}, searchTypeQuantity = {} } = data;
  data.dataPage?.records?.forEach((el) => (el.isChecked = false));
  publicList.value = dataPage.records;
  total.value = dataPage.total;
  tabsData.value = searchTypeQuantity;
  pageShow.value = true;

  getExposedTypes(searchTypeQuantity);
};

const getExposedTypes = async (tabsData) => {
  const { code, data = [] } = await store.dispatch('expose/getExposedTypes');
  if (code !== 0) {
    return;
  }
  data.forEach((item) => {
    item.num = tabsData[item.typeCode];
  });
  tabsList.value = data;
};

const clickItem = (item) => {
  const { businessType, id } = item;
  const address = {
    app: '/Exposure/ExposeList/appDetail',
    officialAccount: '/Exposure/ExposeList/officialAccountDetail',
    miniProgram: '/Exposure/ExposeList/miniProgramDetail',
    domain: '/Exposure/ExposeList/domainDetail',
    ip: '/Exposure/ExposeList/ipDetail',
    web: '/Exposure/ExposeList/webDetail',
    code: '/Exposure/ExposeList/codeDetail',
    supplier: '/Exposure/ExposeList/supplierDetail',
    darknet: '/Exposure/ExposeList/darknetDetail',
  };

  const path = address[businessType];
  if (path) {
    router.push({
      path,
      query: {
        id,
        businessType,
      },
    });
  }

  store.commit('expose/setSearchData', searchData);
};
// 列表复选框事件
const checkboxChange = (item: any) => {
  // 选择类型 0 无 1 当前页 2 根据条件
  if (selectType.value === 0) {
    if (item.isChecked) {
      selectIds.value.push(item.id);
    }
    if (!item.isChecked) {
      selectIds.value.splice(selectIds.value.indexOf(item.id), 1);
    }

    assetIds.value = [...new Set(selectIds.value)];
  }

  if (selectType.value === 1) {
    if (item.isChecked) {
      selectIds.value.push(item.id);
    }
    if (!item.isChecked) {
      selectIds.value.splice(selectIds.value.indexOf(item.id), 1);
      selectCancelIds.value.push(item.id);
    }

    assetIds.value = [...new Set(selectIds.value)];
  }

  if (selectType.value === 2) {
    if (!item.isChecked) {
      cancelIds.value.push(item.id);
    }
    if (item.isChecked) {
      cancelIds.value.splice(cancelIds.value.indexOf(item.id), 1);
    }

    assetIds.value = [...new Set(cancelIds.value)];
  }

  if (
    selectArr.value === 'selectCurrentPage' ||
    selectArr.value === 'conditionSelect' ||
    assetIds.value.length > 0
  ) {
    getAssetCount();
  }
};
// 获取选中的资产数据
const getAssetCount = async () => {
  const params = {
    assetIds: assetIds.value,
    selectType: selectType.value,
    assetType: searchData.searchType,
    condition: searchData.searchCondition,
    holdingRatio: searchData.holdingRatio,
  };
  const { code, data = 0 } = await store.dispatch(
    'expose/getAssetCount',
    params,
  );

  if (code !== 0) {
    return;
  }
  assetCount.value = data;
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #f2f2f2;
  padding: 30px;
}

.search-container {
  margin-bottom: 12px;
  padding: 16px 10px;
}

.expose-main {
  width: 100%;

  // display: flex;
  .main-left {
    min-width: 270px;
    background: #fff;
    flex: 0 0 270px;
    margin-right: 8px;
  }

  .main-right {
    flex: 1;

    .listHead-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      padding-left: 30px;

      .head-left {
        display: flex;
        align-items: center;

        .head-left-check {
          display: flex;
          align-items: center;
          margin-right: 30px;
          cursor: pointer;

          &.all-checked {
            .check-box {
              border: 1px solid $-v-color-primary;
              background: $-v-color-primary;

              &::after {
                content: '';
                display: block;
                width: 7px;
                height: 4px;
                border-left: 1px solid#fff;
                border-bottom: 1px solid#fff;
                transform: rotate(-45deg) translate(0px, 3px);
              }
            }
          }

          .check-box {
            margin-right: 4px;
            width: 12px;
            height: 12px;
            background: rgba(210, 222, 235, 0.1);
            border: 1px solid rgb(210, 222, 235);
            border-radius: 2px;
            box-sizing: border-box;
          }

          .check-title {
            font-size: 12px;
            font-weight: 500;
            line-height: 24px;
            cursor: pointer;
          }
        }

        .head-left-operate {
          cursor: pointer;
          margin-right: 30px;

          .el-dropdown-menu {
            width: 135px;
          }

          .el-select {
            width: 110px;

            ::v-deep .el-input__inner {
              border: none;
              background: none;
              font-size: 12px;
            }
          }
        }

        .asset-import {
          font-size: 12px;
          color: rgb(255, 255, 255);
          cursor: pointer;
          margin-right: 30px;
        }
      }

      .head-right {
        font-size: 12px;
        // color: rgb(255, 255, 255);
        display: flex;
        align-items: center;

        > div {
          margin-left: 5px;
        }

        span {
          color: $-v-color-primary;
        }
      }
    }

    .bottom-right-content {
      min-height: 600px;
    }
  }
}
</style>
<style lang="scss">
.vue-splitter-container {
  min-height: 800px;
  height: auto;

  .splitter-pane-resizer.vertical {
    background: none;

    &:hover {
      background: padding-box $-v-color-primary;
    }
  }
}
</style>
<style lang="scss">
.splitpanes.default-theme .splitpanes__splitter {
  background: none;

  &:hover {
    background: padding-box $-v-color-primary;
  }
}
</style>
